<!--
 * @Descripttion: DC账户页面
 * @Author: maybe
 * @Date: 2019-07-06 17:25:45
 -->
<template>
    <div class="account">
        <div>
            <span class="sub-title">余额</span>
        </div>
        <div>
            <h2 class="text-center font-aqua">{{this.userInfo.balance || 0}}</h2>
            <el-row class="text-center">
                <el-col :span="12" ><div style="border-right: 1px dashed #44456D;">
                    <span class="font-gray">累计投资</span>
                    <p>$2047.00</p>
                    </div></el-col>
                <el-col :span="12"><div>
                    <span class="font-gray">累计收益</span>
                    <p>$4837.00</p>
                </div></el-col>
            </el-row>
        </div>
       <div>
            <span class="sub-title">账户信息</span>
        </div>
        
        <div class="bg-blue-radius">
            <ul>
                <li class="font-gray">
                    <span class="font-light-gray">姓名</span> <span class="pull-right">{{this.userInfo.userName}}</span>
                </li>
                <li class="font-gray">
                    <span class="font-light-gray">账户ID</span> <span class="pull-right">{{this.userInfo.accountId}}</span>
                </li>
                <li class="font-gray">
                    <span class="font-light-gray">货币类型</span> <span class="pull-right">{{this.userInfo.currencyType}}</span>
                </li>
                
            </ul>
        </div>
    </div>
</template>
<script>
import {mapState} from 'vuex'
import {getAccount} from '@/ajax/index'
export default {
    name:'Account',
    data(){
        return{
            msg:'这是一个个人账户管理',
            userInfo:''
        }
    },
    mounted(){
        this.getUserAccount();
    },
    methods:{
        async getUserAccount(){
        var param = {
                    'customerId':this.$store.state.userId
            }
        let result = await getAccount(param);
        if(result.code === '200' && result.data.state === '1'){
                this.userInfo = result.data.data
        }else{
                alert(result.data.message);
        }
        }
    }
}
</script>

<style lang="less" scoped>
.account{
     margin-top: 90px; 
     h2{
         font-size: 34px;
        line-height: 120px;
        margin-bottom: 40px;
        font-weight: lighter;
     }
    .bg-blue-radius{background-color: #242645;border-radius: 4px;padding: 0 20px;}    
    .sub-title{line-height: 40px;vertical-align: -30px;letter-spacing: 1px;}
    ul>li{list-style: none;line-height: 40px;border-bottom: 1px solid #2e3052;font-size: 12px;}
    ul>li:nth-last-child(1){border-bottom: none;}
    .font-light-gray{color: #a7a8cd;}
    .el-col{line-height: 22px;}
}



</style>


